<template>
  <div class="proClass">
    <!-- 头部搜索栏 -->
    <div class="top">
      <span @click="backPath"> <i class="iconfont icon-fanhui" style='font-weight:bold;font-size:20px'></i> </span>
      <div class="top-center" @click="goSearch">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </div>
    <div class="center">
      <div class="center-left" ref="left" @scroll="getScroll">
        <div
          :class="activeS === index ? 'active' : ''"
          class="left-item"
          v-for="(item, index) in classList"
          :key="index"
          @click="activeStyle(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="center-right">
        <div
          class="right-item"
          v-for="(items, indexs) in classList[activeS].list"
          :key="indexs"
        >
          <h4>{{ items.type }}</h4>
          <div class="children-box" >
            <div
              class="children-item"
              v-for="(itemTwo, indexTwo) in items.typeList"
              :key="indexTwo"
              @click="goDes(items.typeList[indexTwo].goodsId)"
            >
              <div class="imgDiv">
                <img :src="itemTwo.img" alt="" width="80px" />
              </div>
              <p>{{ itemTwo.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { classP } from "@/http/api/Proclass";
// import Footer from "@/heightComponent/Foot/footer.vue";
import Search from "@/views/Search/search.vue";
export default {
  data() {
    return {
      classList: ["list"],
      rightList: [],
      activeS: 0, //红色样式
      scrollTopS: 0, //滚动距离
    };
  },
  components: {
    // Footer,
    Search,
  },
  created() {
    this.getClassP(); //获取分类数据
  },
  methods: {
    backPath() {
      //回退1
      this.$router.go(-1);
    },
    goSearch() {
      //去搜索页
      this.$router.push("/search");
    },
    getClassP() {
      //分类数据
      classP("/classPro").then((res) => {
        this.classList = res.classList;
        // this.rightList = res.classList[0].list //默认第一项 右边的数据
        // console.log( this.classList[1]);
      });
    },
    activeStyle(index) {
      //点击修改样式
      this.activeS = index;
      
      // this.$refs.left.scrollTop = this.$refs.left.scrollTop + 64;
    },
    getScroll() {
      // this.scrollTopS = this.$refs.left.scrollTop;
      // console.log(this.scrollTopS);
    },
    goDes(goodsId){ //去详情
      // console.log(goodsId);
      this.$router.push(`/shopdes?id=${goodsId}`)

    }
  },
};
</script>

<style scoped lang='scss'>
.active {
  color: red;
  background: white !important;
}
.proClass {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    border-bottom: 3px solid #ccc;
    height: 200px;
    background: white;
    z-index: 1;
    span {
      font-size: 120px;
      margin-left: 70px;
    }
    .top-center {
      display: flex;
      align-items: center;
      width: 60%;
      height: 85%;
      border-radius: 50px;
      background: #f7f7f7;
      margin-left: 145px;
      i {
        margin-left: 50px;
      }
    }
  }
  .center {
    margin-bottom: 350px;
    margin-top: 200px;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .center-left {
      height: 100%;
      width: 25%;
      border-right: 2px solid black;
      overflow: auto;
      .left-item {
        height: 300px;
        background: #f8f8f8;
        text-align: center;
        line-height: 300px;
      }
    }
    .center-right {
      height: 100%;
      flex: 1;
      width: 1000px;
      overflow: auto;
      width: 60%;
      h4 {
        margin-left: 40px;
      }
      .children-box {
        display: flex;
        justify-content: space-around;
        text-align: center;
      }
    }
  }
  ::-webkit-scrollbar {
    //隐藏滚动条
    width: 12px;
  }
}
</style>